<template>
  <el-button type="success" @click="add">添加信息</el-button>
  <el-button type="danger" @click="del">批量删除</el-button>
  <!--  <el-button type="primary">回到首页</el-button>-->
  <br/>
  <br/>
  <div>
    送水工名称：
    <el-input style="width: 15%" v-model="historyForm.waterManName" clearable placeholder="请输入送水工名称"/>
    送水时间：
    <el-date-picker
        v-model="historyForm.sendWaterTime"
        type="date"
        label="Pick a date"
        placeholder="请输入送水时间"
        style="width: 15%"
    />
    &nbsp;<el-button type="primary" @click="query">查询</el-button>
  </div>
  <br/>
  <el-table
      :data="historyData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" label="全选/全不选" width="55"/>
    <el-table-column prop="id" label="送水历史编号" width="180"/>
    <el-table-column prop="manName" label="送水工名称" width="180"/>
    <el-table-column prop="sendWaterTime" label="送水时间" width="180"/>
    <el-table-column prop="clientName" label="客户名称" width="180"/>
    <el-table-column prop="sendWaterCount" label="送水数量" width="180"/>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button type="success" @click="upd(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p style="text-align: center;font-size: 15px">当前第<font color="red">{{ historyForm.pageNum }}</font>页 共<font
      color="red">{{ historyForm.pages }}</font>页 一共<font color="red">{{ historyForm.total }}</font>条记录</p>
  <br/>
  <el-pagination
      style="position: absolute;right: 25%"
      v-model:current-page="historyForm.pageNum"
      v-model:page-size="historyForm.pageSize"
      :page-sizes="[5, 10, 20, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="historyForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
import {ref, reactive, onMounted} from "vue";
import request from "@/api/request";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";

const historyForm = reactive({
  waterManName: '',
  sendWaterTime: '',
  pageNum: 1,
  pageSize: 5,
  pages: 0,
  total: 0
})
const historyData = ref([]);
const query = () => {
  request.get('/historys/gethistory', {
    params: {
      waterManName: historyForm.waterManName,
      sendWaterTime: historyForm.sendWaterTime,
      pageNum: historyForm.pageNum,
      pageSize: historyForm.pageSize
    }
  }).then(resp => {
    if (resp) {
      historyData.value = resp.data.records;
      historyForm.pages = resp.data.pages;
      historyForm.total = resp.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  historyForm.pageSize = val;
  query();
}
const handleCurrentChange = (val) => {
  historyForm.pageNum = val;
  query();
}

const ids = ref([]);
const handleSelectionChange = (val) => {
  ids.value = [];
  for (let i = 0; i < val.length; i++) {
    ids.value.push(val[i].id);
  }
}
const del = () => {
  if (ids.value.length === 0) {
    ElMessage.info("请勾选要删除的数据");
  } else {
    ElMessageBox.confirm(
        '确认删除吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          request.delete('/historys/batchdel/' + ids.value).then(resp => {
            if (resp.code === 20000) {
              ElMessage.success(resp.data);
              query();
            } else {
              ElMessage.error(resp.data);
            }
          })
        })
  }
}
const add = () => {
  localStorage.setItem("historyId", 0);
  router.replace('/addHistory');
}
const upd = (row) => {
  localStorage.setItem("historyId", row.id);
  router.replace('/addHistory');
}
onMounted(() => {
  query();
})
</script>
